
body {
    background-color: var(--themeColor);
    overflow: hidden;
}

.main {
    padding-bottom: .88rem;

    .top-cate {
        position: sticky;
        top: .88rem;
        background-color: var(--themeColor);
        z-index: 999;
    }

    .category-container {
        display: flex;
        overflow-x: scroll;
        z-index: 999999;
        padding: 0 .2rem;
        border-radius: .20rem;
    }

    .category-container .lay-this img {
        border: 1px solid var(--bd);
    }

    .category-container .lay-this .category-text {
        color: var(--bd);
    }

    .category-item {
        margin: .2rem;
        box-sizing: border-box;
        text-align: center;
    }

    .category-item img {
        width: .86rem;
        height: .86rem;
        border-radius: 50%
    }

    .category-item .category-text {
        margin-top: .15rem;
        font-size: .24rem;
        color: var(--dcl);
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bottom-cate {
        background-color: var(--ff);

        .left {
            background-color: var(--themeColor);

            .item {
                width: 1.65rem;
                padding: .35rem;
                font-weight: 400;
                font-size: var(--default-font-size-28);
                color: var(--dcl);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }


            .lay-this {
                color: var(--bd);
                position: relative;
                background-color: var(--ff);
            }

            .lay-this:before {
                content: "";
                position: absolute;
                margin: auto 0;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                width: .06rem;
                height: .39rem;
                background-image: url('/static/index/images/classify/this.png');
                background-size: contain;
                background-repeat: no-repeat;
            }

        }

        .right {

            .pro-box:last-child {
                border-bottom: none;

            }

            .pro-box {
                position: relative;
                border-bottom: 1px solid var(--ee);

                .cart {
                    position: absolute;
                    bottom: .3rem;
                    right: .1rem;
                    width: .48rem;
                    height: .48rem;
                }

                .icon {

                    width: 1.48rem;
                    height: 1.48rem;
                    background: var(--ff);

                    > img {
                        border-radius: .14rem;
                        width: 100%;
                        height: 100%;
                    }
                }

                .info {
                    flex: 1;
                    margin-left: .15rem;
                    .title {
                        font-weight: 500;
                        font-size: .25rem;
                        color: var(--dcl);
                        margin-bottom: .15rem;

                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .underline {
                        font-size: .22rem;
                        color: var(--c9);
                        text-decoration-line: line-through;

                    }

                    .price {
                        font-weight: bold;
                        font-size: .3rem;
                        color: var(--bd);
                    }

                    .front:before {
                        content: '￥';
                        color: var(--bd);
                        font-size: .24rem;
                    }
                }
            }
        }
    }
}


.theme-color {
    background-color: var(--themeColor);

}

.scroll-container {

    overflow-y: scroll;
    box-sizing: border-box;
    height: calc(100vh - 4rem);
}